<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>nginx反向代理处理跨域请求</title>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用nginx实现代理跨域</title>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
</head>

<body>
  <h3>使用nginx实现代理跨域</h3>
  <p>root 指定网站的根目录</p>
  <p>请求数据地址是自己 ->http://127.0.0.1:11111/apis/data.json</p>
  <p>但被nginx转发了 -> http://127.0.0.1:22222/apis/data.json</p>
  <p class="content"></p>
</body>

</html>

<script>
  // 这里请求自己,最后会被nginx转发成 http://127.0.0.1:22222/apis/data.json
  axios.get('http://127.0.0.1:11111/apis/data.json')
    .then(response => {
      console.log(response.data)
      document.querySelector('.content').innerText = JSON.stringify(response.data)
    })
</script>